<template>
  <div class="login">
    <div class="login-body">
      <i class="iconfont icon-denglu login-icon"></i>
      <!-- 注册表单 -->
      <el-form :model="loginForm" status-icon :rules="rules" ref="loginForm"  class="login-form">
        <el-form-item  prop="email">
          <el-input placeholder="email" v-model="loginForm.email" clearable></el-input>
        </el-form-item>
        <el-form-item  prop="password">
          <el-input placeholder="password" v-model="loginForm.password" show-password></el-input>

        </el-form-item>
        <div class="login-click">
            <el-checkbox v-model="checked" >滴，学生卡|I'm not a robot</el-checkbox>
            <p class="login-forget" @click="toForget(loginForm.email)">忘记密码？</p>
          </div>
        <el-form-item>
          <el-button type="primary" @click="submitForm('loginForm')" :disabled="!checked">登录</el-button>
          <el-button @click="resetForm('loginForm')">重置</el-button>
          <p>没有账号？请先<span class="login-register" @click="go('/register')">注册</span></p>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
data() {
    return {
      checked:false,
      loginForm: {
        email: '',
        password:''
      },
      rules:{
        email: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
        ]
      },
      count:"",
      check:0,
    };
  },
  mounted(){
    this.getMes();
  },
  methods: {
    getMes(){
      console.log(this.$route.query.account);
      this.loginForm.email = this.$route.query.account
    },
    go(path){
      this.$router.push(path)
    },
    toForget(email){
      this.$router.push({path:'/forgetPass',query:{email}});
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 这里是登录
          this.toLogin()

        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    async toLogin(){
      // console.log("这里是登录页面");
      // console.log(this.loginForm);
      var user = this.loginForm;
      let variate = this.loginForm.email;
      const {data:res} = await this.$http.post("selectUser",{variate});
      console.log(res);
      if(res.status != 200){
        this.$message.error('查询失败');
      }else{
        if(res.message.length == 0){
          this.$message('您还没有注册，请先注册哦！');
          this.$router.push("/register");
        }else{
          var pass = res.message[0].password;
          if(user.password != pass){
            this.$message({
              message: '密码不正确，要加油想起来哦',
              type: 'warning'
            });
            user.password = ""
          }else{
            // console.log("这里是登录成功");
            this.$store.commit("updateUser",res.message[0]);
            this.$store.commit("updateShow",true);
            let id = res.message[0].user_id;
            // 登录成功之后将点赞信息从数据库获取，再显示到当前登录的信息的页面
            this.signIn(id);
            this.$router.push({path:"/personalTabbar",query:{id}});
            this.$message({
              message: '登录成功',
              type: 'success'
            });
          }

        }
      }
    },
    // async getPraiseMes(){
    //   // alert("这里是获取点赞信息");
    //   let isLogin = this.$store.getters.getShow;
    //   if(isLogin){
    //     let variate = this.$store.getters.getUser.user_id;
    //     const {data:selPraiseRes} = await this.$http.post('selPraise',{variate});//查询点赞表的信息
    //     console.log(selPraiseRes);
    //     if(selPraiseRes.status != 200){
    //       this.$message.error('获取数据失败');
    //     }else{
    //       let arr = selPraiseRes.message;
    //       if(arr.length == 0){
    //         // alert("该用户没有点赞过！");
    //       }else{
    //         // let praiseId =arr[0].message_id;
    //         // const {data:updateRes} = await this.$http.post("updatePraiseType",{praiseId});
    //         for(let i in arr){
    //           console.log(arr[i]);
    //           if(arr[i].type=="留言"){
    //             console.log("留言");
    //             console.log(arr[i].message_id);
    //             const praiseId = arr[i].message_id;
    //             const {data:updateMesRes} = await this.$http.post("updatePraiseType",{praiseId});
    //           }else if(arr[i].type=="详情"){
    //             console.log("详情");
    //             console.log(arr[i].message_id);
    //             const praiseId = arr[i].message_id;
    //             const {data:updateDataRes} = await this.$http.post("updatePraiseL",{praiseId});
    //           }
    //         }
    //       }


    //     }

    //     // 查询收藏表的信息
    //     const {data:selCollectRes} = await this.$http.post("selCollectL",{variate});
    //     console.log(selCollectRes);
    //     if(selCollectRes.status != 200){
    //        this.$message.error('查询失败');
    //     }else{
    //       let collectArr = selCollectRes.message
    //       if(collectArr.length==0){
    //         console.log("该账号没有收藏过");
    //       }else{
    //         for(let i in collectArr){
    //           if(collectArr[i].type == "详情"){
    //             console.log(collectArr[i].data_id);
    //             const collectId = collectArr[i].data_id;
    //             const {data:res} = await this.$http.post("updateCollectL",{collectId});
    //           }
    //         }
    //       }
    //     }
    //   }else{
    //     this.$message('小可爱，你还没有登录哦');
    //   }

    // },
    // 退出登录：查询之前添加过信息，如果是，就修改，否则就添加
    async signIn(user_id){
      console.log(user_id);
      let variate = user_id;
      const {data:res} = await this.$http.post("selLoginOut",{variate});//查询当前登录的用户之前是否在login-out表添加过信息
      console.log(res);
      if(res.status != 200){
        this.$message.error('查询失败');
      }else{
        let arr = res.message;
        let loginStart_time = this.fileType.changeDate(new Date());
        console.log(loginStart_time);
        if(arr.length==0){
          console.log("没有添加过，添加信息");
          const {data:addLoginStartMes} = await this.$http.post("insertLoginStart",{user_id,loginStart_time});
          console.log(addLoginStartMes);
        }else{
          console.log("添加过了，修改信息");
          const {data:editLoginStartMes} = await this.$http.post("updateLoginStart",{user_id,loginStart_time});
          console.log(editLoginStartMes);
        }
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
}

}
</script>
<style scoped>
.login {
  padding: 200px 0;
}
.login-body {
  /* background-color: red; */
  width: 400px;
  margin: 10px auto;
  /* text-align: center; */
  display: flex;
  flex-direction: column;
  align-items: center;
}
.login-icon {
  /* background-color: #fff; */
  font-size: 70px;
  margin: 10px;
}
.login-form {
  /* background-color: #f56c6c; */
  width: 300px;
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.login-click {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.login-forget:hover {
  color: #409eff;
  cursor: pointer;
}
.login-register:hover {
  color: #409eff;
  cursor: pointer;
}
</style>
